// 版本较高的vue-loader 依赖插件 plugin
// 不用插件的话  可以使用 vue-loader@13.0.0 版本
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode:"development",
    entry:'./src/main.js',
    output:{
        path: path.join(__dirname,'dist'),
        filename: 'build.js'
    },
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader: 'vue-loader' // ['vue-loader'] => 'vue-loader'
            },
            {
                test:/\.html$/,
                use:["html-loader"]
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
              },
            // //处理css 
            {
                test:/\.css$/,
                use:["style-loader","css-loader"]
            },
            // 处理less
            {
                test:/\.less$/,
                use:["style-loader","css-loader","less-loader"]
            },
        ]
    },
    resolve:{ // resolve: 解决
        // 配置后缀名简写 导入的时候可以省略后缀名 import './a.vue' => import 'a'
        extensions:['.js','.vue','.css'],
        alias:{ // alias（别名）
            // 默认导入的是  vue/dist/vue.runtime.js
            // 用处 当导入vue的时候(import Vue from 'vue') 的时候  相当于导入 'vue/dist/vue.esm.js'  esm=>ESModule
            'vue$':'vue/dist/vue.esm.js'  
        }  
    },
    devServer:{
        port:3000,
        hot:true,
        open:true,
        contentBase:path.resolve(__dirname,"dist"),
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template:"./src/index.html"
        }),
    ]
}